<template>
<div>
  <el-form ref="form" :model="form" label-width="100px">

<el-form-item  prop="portrait" class="im" >
  <!--action表示图片要上传到后台qpi的地址 +图片路径  -->
 <el-upload
  class="avatar-uploader"
  :action="uploadURL"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="flag" :src="imageUrl" class="avatar" >
  <span v-if="imuu!=''" class="el-upload-action">
                    <i class="el-icon-zoom-in" style="margin-right: 15px"
                       @click.stop="handlePictureCardPreview()"></i>
                    <i class="el-icon-delete"
                       @click.stop="handleRemove()"></i>
                </span>
</el-upload>

 </el-form-item>

  <el-form-item label="昵称" prop="accName">
 <el-input v-model="form.accName"  disabled></el-input>
 </el-form-item>

<el-form-item label="账户状态" prop="state">
 <el-input  placeholder="审核通过" disabled></el-input>
 </el-form-item>

 <el-form-item label="电话号码" prop="phone">
 <el-input v-model="form.phone" ></el-input>
 </el-form-item>

<el-form-item label="真实姓名" prop="realName">
 <el-input v-model="form.realName" disabled ></el-input>
 </el-form-item>

  <el-radio-group v-model="form.sex" label="性别" >
    <el-radio label="男">男</el-radio>
    <el-radio label="女">女</el-radio>
  </el-radio-group>

<el-form-item label="账号破壳日" prop="registerTime">
 <el-input v-model="form.registerTime" disabled ></el-input>
 </el-form-item>

  <el-form-item label="身份" prop="role">
 <el-input v-model="form.identity" disabled ></el-input>
 </el-form-item>

</el-form>
  <el-button type="primary" round @click="baoCun()">保存</el-button>

</div>
</template>

<script>
import { getOneUser, editUserp } from '@/api/user'
export default {
  el: '.im',
  data () {
    return {
      form: {
        portrait: '',
        accName: '',
        state: '',
        phone: '',
        realName: '',
        sex: '',
        registerTime: '',
        role: 0,
        identity: ''
      },
      imageUrl: 'http://localhost:4096/img/6a3f4961281aeac770f652b58b20d6e2.jpg',
      imgName: '',
      uploadURL: 'http://localhost:4096/files', // 后台地址+upload图片请求路径
      flag: false
    }
  },
  created () {
    this.getMessage()
  },
  methods: {
    getMessage () {
      const id = JSON.parse(localStorage.getItem('userMsg')).id
      getOneUser(id).then(res => {
        this.form = res.data.data
        if (this.form.portrait) {
          this.imageUrl = 'http://localhost:4096/img/' + this.form.portrait
          this.imuu = false
          this.flag = true
        } else {
          this.imageUrl = ''
        }
        if (this.form.role === 1) {
          this.form.identity = '普通会员'
        } else if (this.form.role === 3) {
          this.form.identity = '商家会员'
        } else {
          this.form.identity = '管理员'
        }
      })
    },
    // 上传组件并么有绑定axios,好像药什么手动指定header,能去axios的字段
    // 处理图片预览效
    handlePreview () {

    },
    // 移除图片操作
    handleRemove () {

    },
    // 监听图片上传成功的事件
    handleAvatarSuccess (res, file) {
      console.log(res)
      this.imageUrl = 'http://localhost:4096/img/' + res.data
      this.imgName = res.data
      this.flag = true
      console.log(this.imgName)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    baoCun () {
      const data = {
        id: JSON.parse(localStorage.getItem('userMsg')).id,
        portrait: this.imgName,
        phone: this.form.phone,
        sex: this.form.sex
      }
      editUserp(data).then(res => {
        if (res.data.meta.status === 200) {
          this.$message({
            messgae: res.data.meta.status,
            type: 'success'
          })
        } else {
          this.$message({
            messgae: res.data.meta.status,
            type: 'warning'
          })
        }
      })
    }
  }
}
</script>
<style scoped>

 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    display: block;
  }
</style>
